<template>
  <button @click="fetchGood">获取接口数据</button>
  <div>
    isOpenStage: {{ isOpenStage }} <button @click="isOpenStage = !isOpenStage">切换</button>
  </div>
  <div>
    <TestCom ref="MyTestCom" a="1" :b="2" :c="true" @abc="abcHandler" />
    <button @click="getTestCom">获取test组件的值</button>
  </div>
  <div>
    用户名：<input type="text" ref="myInput"> <button @click="getUserName">获取用户名</button>
  </div>
  <input type="text" @input="inputHandler">
  </input>
  <div>
    书名：{{ book.title }} {{ sub(10, 7) }}
  </div>
  <div>
    <h1>count:{{ count }}</h1>
    <h1>doublueCount:{{ doublueObj.doubleCount }}</h1>
    <h1>doublueCountTwo:{{ doublueObj.doubleCountTwo }}</h1>
    <button @click="add">count++</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, useTemplateRef } from 'vue'
import TestCom from './TestCom.vue'
import { useStorage } from '@vueuse/core'
// 导入的是一个类型
// import type { Book } from './types'
// 导入的是一个值
import { sub, type Book } from './types'
import axios, { type AxiosResponse } from 'axios'

const isOpenStage = useStorage('isOpen', false)

type TestComType = InstanceType<typeof TestCom>

type CountType = { doubleCount: number, doubleCountTwo: number }

interface LunBoItem {
  url: string
  img: string
}

interface LunboData {
  status: number
  message: LunBoItem[]
}

const fetchGood = async () => {
  let { data } = await axios.get<LunboData, AxiosResponse<LunboData>>('http://47.98.187.80:5000/api/getlunbo')
  console.log(data.message)
}

const abcHandler = (money: number) => {
  console.log('父组件的abc函数触发了', money)
}

const count = ref(100)
const inputEle = useTemplateRef<HTMLInputElement>('myInput')
const TestComRef = useTemplateRef<TestComType>('MyTestCom')

const getTestCom = () => {
  console.log(TestComRef.value?.money)
}

const getUserName = () => {
  console.log(inputEle.value?.value)
}

const inputHandler = (event: Event) => {
  console.log((event.target as HTMLInputElement).value)
}
const doublueObj = computed<CountType>(() => {
  return {
    doubleCount: count.value * 2,
    doubleCountTwo: (count.value * 2) + 2,
  }
})

const book = reactive<Book>({ title: '十万个为什么', price: 9.9 })
const add = () => {
  count.value++
}

</script>

<style scoped></style>